<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>元素倒影3</title>
        <style>
            body {
                margin: 0;
                background: #000;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                perspective: 1000px;
            }

            .card-container {
                position: relative;
                width: 300px;
                height: 300px;
                transform-style: preserve-3d;
                animation: rotate-container 15s infinite linear;
                animation-play-state: paused;
                transform: rotateY(0deg);
            }

            .card-container:hover {
                animation-play-state: paused;
            }

            @keyframes rotate-container {
                0% {
                    transform: rotateY(0deg);
                }

                100% {
                    transform: rotateY(360deg);
                }
            }

            .card {
                position: absolute;
                width: 200px;
                height: 260px;
                left: 50%;
                top: 50%;
                margin-left: -100px;
                margin-top: -130px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
                overflow: hidden;
                opacity: 0;
                transform-style: preserve-3d;
                backface-visibility: hidden;
                -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.8));
            }

            .card img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                border-radius: 8px;
                transform: rotateY(var(--card-face-rotation, 0deg));
                backface-visibility: hidden;
            }

            @keyframes card-reveal-and-move {
                0% {
                    opacity: 0;
                    transform: translateZ(0) rotateY(0deg);
                }

                5% {
                    opacity: 1;
                    transform: translateZ(0) rotateY(0deg);
                }

                50% {
                    opacity: 1;
                    transform: rotateY(var(--clockwise-angle)) translateZ(var(--overshoot-z-distance)) rotateY(var(--card-face-rotation));
                }

                100% {
                    opacity: 1;
                    transform: rotateY(var(--clockwise-angle)) translateZ(var(--final-card-z-distance)) rotateY(var(--card-face-rotation));
                }
            }
        </style>
    </head>

    <body>
        <div class="card-container" id="container">
            <div class="card"><img src="../public/img/1.jpg" alt="Card 1"></div>
            <div class="card"><img src="../public/img/2.jpg" alt="Card 2"></div>
            <div class="card"><img src="../public/img/3.jpg" alt="Card 3"></div>
            <div class="card"><img src="../public/img/4.jpg" alt="Card 4"></div>
            <div class="card"><img src="../public/img/5.jpg" alt="Card 5"></div>
            <div class="card"><img src="../public/img/6.jpg" alt="Card 6"></div>
        </div>

        <script>
            const container = document.getElementById('container');
            const cards = document.querySelectorAll('.card');
            const cardCount = cards.length;

            // 配置项
            const radius = 300;
            const maxOvershootAmount = 120;
            const minOvershootAmount = 0;
            const singleCardAnimationDuration = 2.5;
            const totalDeploymentTime = 3.5;

            // 计算派生值
            const angleStep = 360 / cardCount;
            const delayBetweenEachCardAnimation = totalDeploymentTime / cardCount;

            cards.forEach((card, index) => {
                // 计算每张卡片的最终角度（顺时针方向）
                const finalCardAngle = -index * angleStep;

                // 计算顺时针旋转角度：从0度开始，顺时针旋转到最终位置
                // 如果最终角度是负数，需要计算正确的顺时针路径
                let clockwiseAngle;
                if (finalCardAngle <= 0) {
                    // 对于负角度，顺时针旋转就是该角度本身
                    clockwiseAngle = finalCardAngle;
                } else {
                    // 对于正角度，顺时针旋转需要减去360度
                    clockwiseAngle = finalCardAngle - 360;
                }

                // 动态计算"过冲"距离
                const angleInRadians = finalCardAngle * Math.PI / 180;
                const cosValue = Math.cos(angleInRadians);
                const normalizedPosition = (cosValue + 1) / 2;
                const dynamicOvershootAmount = minOvershootAmount +
                    (maxOvershootAmount - minOvershootAmount) * normalizedPosition;

                // 设置CSS变量
                card.style.setProperty('--clockwise-angle', `${clockwiseAngle}deg`);
                card.style.setProperty('--final-card-z-distance', `${radius}px`);
                card.style.setProperty('--overshoot-z-distance', `${radius + dynamicOvershootAmount}px`);
                // 确保图片始终面向观察者
                card.style.setProperty('--card-face-rotation', `${-clockwiseAngle}deg`);

                // 应用动画
                card.style.animation =
                    `card-reveal-and-move ${singleCardAnimationDuration}s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards`;
                card.style.animationDelay = `${index * delayBetweenEachCardAnimation}s`;
            });

            // 计算整体容器旋转动画的启动时间
            let delayBeforeContainerRotate = cardCount > 0 ?
                (cardCount - 1) * delayBetweenEachCardAnimation + singleCardAnimationDuration :
                0.1;

            setTimeout(() => {
                if (cardCount > 0) {
                    container.style.animationPlayState = 'running';
                }
            }, delayBeforeContainerRotate * 1000);
        </script>
    </body>

</html>